<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>美女相册</title>
	<style>
		#big{
			width: 400px;
			height: 250px;
		}

	</style>
</head>
<body>
	<div class="wrap">
		<h4>美女画廊</h4>
		<div class="pic-box">
			<img src="../image/1-small.jpg" alt="美女A">
			<img src="../image/2-small.jpg" alt="美女B">
			<img src="../image/3-small.jpg" alt="美女C">
		</div>
		<div class="big_box">

			<img src="../image/placeholder.png" alt="" id="big">

		</div>
		<div class="text">
			<p id="title">
				选择一个图片
			</p>
		</div>
	</div>

	<script>

		var imgs = document.getElementsByTagName("img");
		var big = document.getElementById('big');
		var title = document.getElementById('title');

		for(var i=0;i<imgs.length;i++){
			imgs[i].onclick = function(){
				big.src = this.src
				title.innerHTML = this.alt
			}
		}



	</script>
</body>
</html>